
<template>
  <div class="loginBox" v-drag="'loginTit'">
    <div class="loginTit" id="loginTit">
      <p class="loginTxt" v-if="ChoiceNum == 1">登录</p>
      <p class="loginTxt" v-if="ChoiceNum == 2">邮箱登录</p>
      <p class="loginTxt" v-if="ChoiceNum == 3">手机号登录</p>
      <p class="loginTxt" v-if="ChoiceNum == 4">注册</p>
      <i
        class="iconfont icon-x hideBtn"
        @click="setChange_isShowLoginBox(false)"
      ></i>
    </div>
    <Choice v-if="ChoiceNum == 1" />
    <EmailLogin v-if="ChoiceNum == 2" />
    <PhoneLogin v-if="ChoiceNum == 3" />
    <Register v-if="ChoiceNum == 4" />
  </div>
</template>

<script>
import Choice from "@/components/Login/choice.vue";
import EmailLogin from "@/components/Login/emailLogin.vue";
import PhoneLogin from "@/components/Login/phoneLogin.vue";
import Register from "@/components/Login/register.vue";
import { mapState, mapActions } from "vuex";
export default {
  components: {
    Choice,
    EmailLogin,
    PhoneLogin,
    Register,
  },
  computed: {
    ...mapState("loginStore", ["ChoiceNum"]),
  },
  methods: {
    ...mapActions("loginStore", ["setChange_isShowLoginBox"]),
  },
};
</script>

<style lang="scss" scoped>
.loginBox {
  position: fixed;
  left: calc(50% - 265px);
  top: calc(50% - 265px);
  background: #fff;
  z-index: 99999;
  width: 530px;
  display: flex;
  flex-direction: column;
  height: 372px;
  border-radius: 4px;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.8);
  .loginTit {
    background: #2d2d2d;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .loginTxt {
      padding-right: 45px;
      margin: 0;
      height: 38px;
      line-height: 38px;
      padding-left: 18px;
      border-radius: 3px 3px 0 0;
      font-weight: bold;
      font-size: 14px;
      color: #fff;
    }
    .hideBtn {
      color: #fff;
      display: block;
      padding: 10px;
    }
  }
}
</style>